<template>
    <div id="setAttendance">
        <div class="breadcrumb">
            <img src="../../../../static/img/attendance_1.png" class="head_img">
            <span class="title">考勤设置</span>
        </div>
        <div class="list">
            <div class="list_head">
                <span class="head_name">设置列表</span>
                <el-button class="add" type="primary" @click="addNewAttendance()">新增</el-button>
            </div>
            <el-table :data="list">
                <el-table-column prop="semesterName" label="学期" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="times" label="考勤总次数">
                </el-table-column>
                <el-table-column label="考勤时间" width="240">
                    <template scope="scope">
                        <p v-for="item in scope.row.periods" :key="item">{{item.name}} {{item.startTime}} - {{item.endTime}}</p>
                    </template>
                </el-table-column>
                <el-table-column prop="minDuration" label="最少签到时长" width="140">
                </el-table-column>
                <el-table-column prop="campus" label="应用校区" show-overflow-tooltip>
                    <template scope="scope">
                        <span v-for="item in scope.row.unNames" :key="item">{{item}}&#x3000;</span>
                    </template>
                </el-table-column>
                <el-table-column min-width="150" align="right">
                    <template scope="scope">
                        <el-button size="small" type="text" @click="selectDetail(scope.row)">编辑</el-button>
                        <el-button size="small" type="text" @click="deleteAttend(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog title="删除" :visible.sync="dialogFormVisible_del">
            <span>删除该学期考勤设置后，学生在该学期无法进行考勤签到，是否继续删除</span>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="confirmDelete()">确定</el-button>
                <el-button :plain="true" type="primary" @click="dialogFormVisible_del = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import { mapState, mapActions } from "vuex";

    export default {
        data() {
            return {
                list: [],
                campusList: [],
                semesters: [],
                dialogFormVisible_del: false,
                deltargetId: ""
            };
        },
        mounted() {
            this.getCampus();
            this.getSemesterDetail();
            this.getAttendList();
        },
        computed: mapState({ user: state => state.user }),
        methods: {
            //考勤列表
            getAttendList() {
                this.list = [];
                // let url = this.$util.domain + "/campusadminapi/v2/attendance/target/list";
                let url = this.$util.domain + "/campusadminapi/v3/attendance/target/list";
                this.$http({
                    url,
                    method: "GET"
                }).then(response => {
                    if (response.data.error == 10000) {
                        let configList = response.data.data;
                        if (configList && configList.length > 0) {
                            for (let i = 0; i < configList.length; i++) {
                                let $index = i + 1,
                                    $semesterName = configList[i].sid,
                                    $times = configList[i].times,
                                    $periods = configList[i].periods,
                                    $targetId = configList[i].id,
                                    $minDuration = configList[i].minDuration,
                                    $unids = configList[i].unids;

                                this.semesters.forEach(item => {
                                    if ($semesterName == item.sid) {
                                        $semesterName = item.semesterName;
                                    }
                                });
                                this.campusList.forEach(item => {
                                    for (let i = 0; i < $unids.length; i++) {
                                        if (item.unid == $unids[i]) {
                                            $unids[i] = item.zoneName;
                                        }
                                    }
                                });
                                this.list.push({
                                    index: $index,
                                    times: $times + '次',
                                    unNames: $unids,
                                    periods: $periods,
                                    targetId: $targetId,
                                    minDuration: $minDuration + '分钟',
                                    semesterName: $semesterName
                                });
                            }
                        }
                    }
                });
            },
            // 获取学期列表
            getSemesterDetail() {
                let url = this.$util.domain + "/campusadminapi/v1/tools/semesters";

                this.$http({
                    url,
                    method: "GET"
                }).then(response => {
                    if (response.data.error == 10000) {
                        // 学期列表
                        let semesterList = response.data.data;
                        if (semesterList && semesterList.length > 0) {
                            for (let i = 0; i < semesterList.length; i++) {
                                this.semesters.push({
                                    sid: semesterList[i].sid,
                                    semesterName: semesterList[i].semesterName
                                });
                            }
                        }
                    }
                });
            },
            //获取所有校区
            getCampus() {
                let url = this.$util.domain + "/campusadminapi/v1/tools/campuszones";

                this.$http({
                    url,
                    method: "GET"
                }).then(response => {
                    if (response.data.error == 10000) {
                        let dataList = response.data.data;
                        if (dataList && dataList.length > 0) {
                            for (let i = 0; i < dataList.length; i++) {
                                this.campusList.push({
                                    unid: dataList[i].unid,
                                    zoneName: dataList[i].zoneName
                                });
                            }
                        }
                    }
                });
            },
            // 编辑
            selectDetail(row) {
                let obj = {
                    targetId: row.targetId
                };
                this.$util.refreshTo("/#/newAttendance", obj);
            },
            // 删除
            deleteAttend(row) {
                this.deltargetId = row.targetId;
                this.dialogFormVisible_del = true;
            },
            confirmDelete() {
                let url = this.$util.domain + "/campusadminapi/v2/attendance/site/del";

                this.$http({
                    url,
                    method: "GET",
                    params: {
                        targetId: Number(this.deltargetId)
                    }
                }).then(response => {
                    if (response.data.error == 10000) {
                        // 删除成功
                        this.list = this.list.filter(item => {
                            return Number(item.targetId) != Number(this.deltargetId);
                        });
                        this.$util.successMsg("成功删除考勤目标");
                    } else {
                        this.$util.errorMsg(response.data.message);
                    }
                },
                    response => {
                        this.$util.errorMsg(response.data.message);
                    }
                );
                this.dialogFormVisible_del = false;
            },
            // 新增
            addNewAttendance() {
                location.href = "/#/newAttendance";
            }
        }
    };
</script>

<style scoped>
    #setAttendance {
        padding-top: 80px;
        height: calc(100% - 100px);
    }

    .add {
        position: absolute;
        right: 0px;
    }

    .addevice {
        background: #00c18b;
        position: absolute;
        right: 100px;
        border-radius: 0;
    }

    .search {
        margin-bottom: 15px;
    }

    .inp {
        width: 300px;
        display: inline-block;
    }
</style>